<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
	body
{
	margin:30px;
	background-color:#E9E9E9;
}
.b {
	width: 300px;
	height: 300px;
	background: red;
	box-shadow: 5px 0 5px -5px #000,-5px 0 5px -5px #000,
				8px 0 5px -5px #fff87c,-8px 0 5px -5px #fff87c;
}
div.polaroid
{
	width:294px;
	padding:10px 10px 20px 10px;
	border:1px solid #BFBFBF;
	background-color:white;
	/* Add box-shadow */
	box-shadow:2px 2px 3px #aaaaaa;
}

div.rotate_left
{
	float:left;
	-ms-transform:rotate(7deg); /* IE 9 */
	-moz-transform:rotate(7deg); /* Firefox */
	-webkit-transform:rotate(7deg); /* Safari and Chrome */
	-o-transform:rotate(7deg); /* Opera */
	transform:rotate(7deg);
}

div.rotate_right
{
	float:left;
	-ms-transform:rotate(-8deg); /* IE 9 */
	-moz-transform:rotate(-8deg); /* Firefox */
	-webkit-transform:rotate(-8deg); /* Safari and Chrome */
	-o-transform:rotate(-8deg); /* Opera */
	transform:rotate(-8deg);
}
	</style>
</head>
<body>
<!-- IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。 
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow	必需。水平阴影的位置。允许负值。	测试
v-shadow	必需。垂直阴影的位置。允许负值。	测试
blur	可选。模糊距离。	测试
spread	可选。阴影的尺寸。	测试
color	可选。阴影的颜色。请参阅 CSS 颜色值。	测试
inset	可选。将外部阴影 (outset) 改为内部阴影。	测试

-->
<!-- <div class="img">
	<div class="polaroid rotate_left">
	<img src="http://www.w3school.com.cn/i/ballade_dream.jpg" alt="">
	<p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p>
</div>
<div class="polaroid rotate_right">
	<img src="http://www.w3school.com.cn/i/china_pavilion.jpg" alt="">
	<p class="caption">2010年上海世博会，中国馆。</p>
</div> -->
<div class="b">
	
</div>
</div>

</body>
</html>